<template>
	<wsPage :title="$t('orderDetail.orderdetail')">
		<div slot="page_operate">
			<Button type="ghost" @click="goBack"><Icon type="android-close"></Icon><span>{{$t('orderDetail.close')}}</span></Button>
		</div>
		<div style="margin-bottom: 2%;margin-top: 1%;">
			<Steps :current="current">
		        <Step :title="$t('orderDetail.SubmitOrder')" content=""></Step>
		        <Step :title="$t('orderDetail.payOrder')" content=""></Step>
				<Step :title="$t('orderDetail.ConfirmOrder')" content=""></Step>
		        <Step :title="$t('orderDetail.PlatformDelivery')" content=""></Step>
		        <Step :title="$t('orderDetail.ConfirmReceipt')" content=""></Step>
		        <Step :title="$t('orderDetail.CompleteEvaluation')" content=""></Step>
		    </Steps>
		</div>

		<wsSmPanel>
			<div slot="list_operate">
				<Button type="ghost" @click="showAddModal" v-show="basicData[0].status == 1">{{$t('orderDetail.editCostInfo')}}</Button>
				<!-- <Button type="ghost" @click="showAddModal">备注订单</Button> -->
			</div>
			<div slot="list_data" class="mbody">
				<Row>
					<Col :span="24" class="m1">
						<Icon type="bookmark" size="22" style="padding-left: 10px"></Icon><span>{{$t('orderDetail.basicInfo')}}</span>
					</Col>
					<Col :span="24">
						<Table border :columns="basicColumns" :data="basicData"></Table>
					</Col>
				</Row>
			</div>

			<div slot="list_data" class="mbody">
				<Row>
					<Col :span="24" class="m1">
						<Icon type="bookmark" size="22" style="padding-left: 10px"></Icon><span>{{$t('orderDetail.recipientInfo')}}</span>
					</Col>
					<Col :span="24">
						<Table border :columns="consigneeColumns" :data="consigneeData"></Table>
					</Col>
				</Row>
			</div>

			<div slot="list_data" class="mbody">
				<Row>
					<Col :span="24" class="m1">
						<Icon type="bookmark" size="22" style="padding-left: 10px"></Icon><span>{{$t('orderDetail.productInfo')}}</span>
					</Col>
					<Col :span="24">
						<!-- <Table border :columns="productColumns" :data="productData"></Table> -->
						<ws-table style="width:100%" :data="productData">
							<ws-table-column align="center" :label="$t('orderDetail.productPic')">
								<template slot-scope="scope">
									<img :src="scope.row.thumbnail" style="width: 100px;height: 90px;" />
								</template>
							</ws-table-column>
							<ws-table-column prop="name" :label="$t('orderDetail.productName')" align="center"></ws-table-column>
							<!-- <ws-table-column prop="thumbnail" label="商品图片"  align="center"></ws-table-column> -->
							<ws-table-column prop="propertyValue" :label="$t('orderDetail.productSpec')" align="center"></ws-table-column>
							<!-- <ws-table-column prop="productValueMap" label="属性" align="center"></ws-table-column> -->
							<ws-table-column :label="$t('orderDetail.price')" align="center">
								<template slot-scope="scope">
									<p><span>{{scope.row.symbol}}{{scope.row.price}}</span></p>
								</template>
							</ws-table-column>
							<ws-table-column prop="quantity" :label="$t('orderDetail.number')" align="center"></ws-table-column>
							<ws-table-column :label="$t('orderDetail.Subtotal')" align="center">
								<template slot-scope="scope">
									<p><span>{{scope.row.symbol}}{{scope.row.subtotal}}</span></p>
								</template>
							</ws-table-column>
						</ws-table>
					</Col>
				</Row>
				<Row v-if="isShowTotal == 1">
                    <Col :span="3" style="float: right; font-size: 20px; margin-top: 10px;">
                        <span>{{$t('orderDetail.orderTotal')}}：{{totalSymbol}}{{totalize}}</span>
                    </Col>
                </Row>
			</div>

			<div slot="list_data" class="mbody">
				<Row>
					<Col :span="24" class="m1">
						<Icon type="bookmark" size="22" style="padding-left: 10px"></Icon><span>{{$t('orderDetail.feeInfo')}}</span>
					</Col>
					<Col :span="24">
						<!-- <Table border :columns="costColumns" :data="costData"></Table> -->
						<ws-table style="width:100%" :data="costData">
							<ws-table-column prop="consumeAmount" :label="$t('orderDetail.TotalProduct')"  align="center"></ws-table-column>
							<ws-table-column prop="freight" :label="$t('orderDetail.Freight')" align="center"></ws-table-column>
							<ws-table-column prop="discountAmount" :label="$t('orderDetail.coupon')" align="center"></ws-table-column>
							<ws-table-column prop="totalAmount" :label="$t('orderDetail.totalAmountOrder')" align="center"></ws-table-column>
							<ws-table-column prop="payAmount" :label="$t('orderDetail.PayableAmount')" align="center"></ws-table-column>
						</ws-table>
					</Col>
				</Row>
			</div>

			<!-- <div slot="list_data" class="mbody">
				<Row>
					<Col :span="24" class="m1">
						<Icon type="bookmark" size="22" style="padding-left: 10px"></Icon><span>退款信息</span>
					</Col>
					<Col :span="24">
						<!-- <Table border :columns="refundColumns" :data="refundData"></Table> -->
						<ws-table style="width:100%" :data="refundData">
							<ws-table-column prop="name" :label="$t('orderDetail.productName')"  align="center"></ws-table-column>
							<ws-table-column prop="price" :label="$t('orderDetail.productPrice')" align="center"></ws-table-column>
							<ws-table-column prop="quantity" :label="$t('orderDetail.productNumber')" align="center"></ws-table-column>
						</ws-table>
					</Col>
				</Row>
			</div> -->
		</wsSmPanel>

		<!--修改订单支付金额弹框-->
		<wsModal v-model="modal1.show" :ok-text="$t('orderDetail.save')" :cancelText="$t('orderDetail.cancel')"    :title="modal1.title" @on-ok="saveModal1" @on-cancel="cancelModal1">	
			<Form ref="modal1" :model="modal1.model" :rules="modal1.rules" :label-width="100">
		        <FormItem :label="$t('orderDetail.PaymentAmount')" prop="name">
		            <Input v-model="modal1.model.payAmount" :placeholder="$t('orderDetail.enterOrderAmount')" autofocus></Input>
		        </FormItem>		        
		    </Form>			
		</wsModal>	
		<!-- 订单信息
		<Tabs type="card" @on-click="selectDetail">
			<TabPane label="基本信息" name="1">
				<Row>
				 	<Col :span="24">
						<Table border :columns="basicColumns" :data="basicData"></Table>
					</Col>
				</Row>
			</TabPane> -->

			<!-- <TabPane label="收货人信息" name="2">
				<Row>
				 	<Col :span="24">
						<Table border :columns="consigneeColumns" :data="consigneeData"></Table>
					</Col>
				</Row>
			</TabPane> -->

			<!-- <TabPane label="商品信息" name="3">
				<Row>
				 	<Col span="24">
		                <div class="layout-content">
		                	<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										商品图片：
									</Col>
									<Col>
										<img v-if="orderForm.thumbnail" :src="'/ws/img/view/'+orderForm.thumbnail" class="avatar">
			  							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										商品名称：
									</Col>
									<Col>
										{{orderForm.name}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										属性：
									</Col>
									<Col>
										{{orderForm.property}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										价格：
									</Col>
									<Col>
										{{orderForm.price}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
								<Col span="12">
									<Col span="8" class="layout-content-title">
										数量：
									</Col>
									<Col>
										{{orderForm.quantity}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										小计：
									</Col>
									<Col>
										{{orderForm.subtotal}}
									</Col>
								</Col>
							</Col>
		                </div>
		            </Col>
				</Row>
			</TabPane> -->
			<!-- <TabPane label="商品信息" name="3">
				<Row>
				 	<Col :span="24">
						<Table border :columns="productColumns" :data="productData"></Table>
					</Col>
				</Row>
                <Row v-if="isShowTotal == 1">
                    <Col :span="3" style="float: right; font-size: 20px; margin-top: 10px;">
                        <span>订单总计：{{totalize}}</span>
                    </Col>
                </Row>
			</TabPane> -->

			<!-- <TabPane label="费用信息" name="4">
				<Row>
				 	<Col :span="24">
						<Table border :columns="costColumns" :data="costData"></Table>
					</Col>
				</Row>
			</TabPane>

            <TabPane label="退款信息" name="5" :disabled="disabled">
                <Row>
                    <Col :span="24">
                        <Table border :columns="refundColumns" :data="refundData"></Table>
                    </Col>
                </Row>
            </TabPane> -->
		<!-- </Tabs> -->
	</wsPage>
</template>

<script>
	export default {
		data() {
    		return {
				modal1: {
					show: false,
					title: '修改订单支付金额',
					model: {
						payAmount:''
					},
					rules: {
						payAmount: [
							{ required: true, message: '请输入订单支付金额'}
						]
					} 
				},
    			basicColumns: [
    				{
    					title: '订单编号',
    					key: 'sn',
    					align: 'center'
    				},
    				{
    					title: '用户账号',
    					key: 'memberName',
    					align: 'center'
    				},
    				{
    					title: '支付方式',
    					key: 'payType',
    					align: 'center',
                        render: (h, params) => {
                            return h('span',{

                            },this.checkType(params.row.payType))
                        }
					},
					{
						title: '留言',
    					key: 'memo',
    					align: 'center'
					},
    				// {
    				// 	title: '配送方式',
    				// 	key: 'expressName',
    				// 	align: 'center'
    				// },
    				{
    					title: '物流单号',
    					key: 'trackingNo',
    					align: 'center'
    				}
				],
				
    			basicData: [],
    			consigneeColumns: [
    				{
    					title: '收货人',
    					key: 'consignee',
    					align: 'center'
    				},
    				{
    					title: '手机号',
    					key: 'phone',
    					align: 'center'
    				},
    				{
    					title: '收货地址',
    					key: 'fullAddress',
    					align: 'center'
    				}
    			],
    			consigneeData: [],
    			productColumns: [{
    					title: '商品图片',
    					key: 'thumbnail',
    					align: 'center',
    					render: (h, params) => {
                            if(params.row.thumbnail != null && params.row.thumbnail != '' && params.row.thumbnail != undefined){
		                    	return h('div', [
		                            h('img', {
		                            	attrs: {
		        						    src: '/ws/img/view/'+params.row.thumbnail,
		        						    style: 'width: 30px;height: 30px;border-radius: 2px;'
		    						  	},
		                            })
		                        ]);
	                        }
                        }
    				},
    				{
    					title: '商品sku名称',
                        key: 'name',
    					align: 'center'
    				},
    				{
    					title: '属性',
                        key: 'productValueMap',
    					align: 'center'
    				},
    				{
    					title: '价格',
                        key: 'price',
    					align: 'center'
    				},
    				{
    					title: '数量',
                        key: 'quantity',
    					align: 'center'
    				},
    				{
    					title: '小计',
                        key: 'subtotal',
    					align: 'center'
    				}
    			],
    			productData: [],
    			costColumns: [
    				{
						title: '商品合计',
						width: '20%',
    					key: 'consumeAmount',
    					align: 'center'
    				},
    				{
						title: '运费',
						width: '20%',
    					key: 'freight',
    					align: 'center'
    				},
    				{
						title: '优惠券',
						width: '20%',
    					key: 'discountAmount',
    					align: 'center'
    				},
    				{
						title: '订单总金额',
						width: '20%',
    					key: 'totalAmount',
    					align: 'center',
                        render:(h, params) => {
                            return h('span', {
                                style: {
                                    color: 'red'
                                }
                            },params.row.totalAmount)
                        }
                        // className: 'table-column-info'
    				},
    				{
						title: '应付款金额',
						width: '200px',
    					key: 'payAmount',
    					align: 'center',
                        render:(h, params) => {
                            return h('span', {
                                style: {
                                    color: 'red'
                                }
                            },params.row.payAmount)
                        }
                        // className: 'table-column-info'
    				}
    			],
    			costData: [],
                refundColumns: [
                    {
                        title: '商品名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '商品价格/￥',
                        key: 'price',
                        align: 'center'
                    },
                    {
                        title: '商品数量',
                        key: 'quantity',
                        align: 'center'
                    }
                ],
                refundData: [],
    			traces: [],
    			orderLogistic: {},
    			queryForm: {
    				orderId: null
    			},
    			orderId: null,
    			current: 1,
    			activeIndex:0,
    			orderForm: {},
    			id:'',
                refundId:'',
				totalize: 0,
				totalSymbol:'',
                isShowTotal: 0,
				disabled: false
			}
    	},
    	mounted: function () {
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			this.$i18n.locale=getCurrentLanguage;
			// 英文
			if(getCurrentLanguage=='en'){
				this.modal1={
					show: false,
					title: 'Modify the order payment amount',
					model: {
						payAmount:''
					},
					rules: {
						payAmount: [
							{ required: true, message: 'Please enter the order payment amount'}
						]
					} 
				};

				this.basicColumns=[
    				{
    					title: 'Order number',
    					key: 'sn',
    					align: 'center'
    				},
    				{
    					title: 'user account',
    					key: 'memberName',
    					align: 'center'
    				},
    				{
    					title: 'payment method',
    					key: 'payType',
    					align: 'center',
                        render: (h, params) => {
                            return h('span',{

                            },this.checkType(params.row.payType))
                        }
					},
					{
						title: 'leave a message',
    					key: 'memo',
    					align: 'center'
					},
    				{
    					title: 'Delivery Method',
    					key: 'expressName',
    					align: 'center'
    				},
    				{
    					title: 'shipment number',
    					key: 'trackingNo',
    					align: 'center'
    				}
				];

				this.consigneeColumns=[
    				{
    					title: 'Receiver',
    					key: 'consignee',
    					align: 'center'
    				},
    				{
    					title: 'phone number',
    					key: 'phone',
    					align: 'center'
    				},
    				{
    					title: 'Shipping address',
    					key: 'fullAddress',
    					align: 'center'
    				}
    			];


			}else if(getCurrentLanguage=='it'){
				// 意大利
				this.modal1={
					show: false,
					title: "Modifica l'importo del pagamento dell'ordine",
					model: {
						payAmount:''
					},
					rules: {
						payAmount: [
							{ required: true, message: "Si prega di inserire l'importo del pagamento dell'ordine"}
						]
					} 
				};

				this.basicColumns=[
    				{
    					title: "Numero dell'ordine",
    					key: 'sn',
    					align: 'center'
    				},
    				{
    					title: 'Account utente',
    					key: 'memberName',
    					align: 'center'
    				},
    				{
    					title: 'Metodo di pagamento',
    					key: 'payType',
    					align: 'center',
                        render: (h, params) => {
                            return h('span',{

                            },this.checkType(params.row.payType))
                        }
					},
					{
						title: 'Lascia un messaggio',
    					key: 'memo',
    					align: 'center'
					},
    				{
    					title: 'Metodo di consegna',
    					key: 'expressName',
    					align: 'center'
    				},
    				{
    					title: "Numero dell'ordine logistico",
    					key: 'trackingNo',
    					align: 'center'
    				}
				],

				this.consigneeColumns=[
    				{
    					title: 'destinatario',
    					key: 'consignee',
    					align: 'center'
    				},
    				{
    					title: 'Numero di cellulare',
    					key: 'phone',
    					align: 'center'
    				},
    				{
    					title: 'Indirizzo di ricezione',
    					key: 'fullAddress',
    					align: 'center'
    				}
    			];
			}

    		this.id = this.$route.query.id;
            this.refundId = this.$route.query.refundId;
            if(-1 == this.refundId){
                this.disabled = true;
            }
    		// this.queryOrder();
			this.init ();			

    	},
    	methods: {
			init (){
				this.queryBasic();
				this.queryConsignee();
				this.queryProduct();
				this.queryCost();
				this.queryRefund();
			},
    		selectDetail(name){
    			this.queryForm = this.id;
    			if(name == 1){
    				this.queryBasic();
    			}
    			if(name == 2){
    				this.queryConsignee();
    			}
    			if(name == 3){
    				this.queryProduct();
    			}
    			if(name == 4){
    				this.queryCost();
    			}
                if(name == 5){
                    this.queryRefund();
                }
    		},
    		/**
    		* 查询订单信息
    		*/
    // 		queryOrder(){
    // 			this.activeIndex = 0;
    // 			const _this = this;
    // 			this.axios.get('/ws/ms/orders/' + this.id).then(response => {
				// 	var res = response.data;
				// 	var resMeta = res.meta;
				// 	if (0 == resMeta.code) {
				// 		var data=res.data;
				// 		_this.orderForm= data;
				// 		_this.current = parseInt(_this.orderForm.status);
				// 		_this.orderForm.status = _this.checkStatus(res.data.status);
				// 		_this.orderForm.tradeStatus = _this.checkTradeStatus(res.data.tradeStatus);
				// 		_this.orderForm.payType = _this.checkType(res.data.payType);
				// 	} else {
				// 		_this.$Message.warning(resMeta.message);
				// 	}
				// });
    // 		},
    		/**
    		 * 查询基本信息
    		 */
    		queryBasic(){
                this.activeIndex = 0;
    		 	const _this = this;
    		 	this.axios.get('/ws/ms/orders/basic/'+ this.id).then(response => {
    		 		var res = response.data;
					console.log(res);
    		 		var resMeta = res.meta;
    		 		if (0 === resMeta.code) {
    		 			_this.basicData = res.data;

                        _this.current = parseInt(_this.basicData[0].status);


                        if (null !== _this.basicData[0].payType) {
                            _this.basicData.payType = _this.checkType(_this.basicData[0].payType);
                        }
    		 		}else {
    		 			_this.$Message.warning(resMeta.message);
    		 		}
    		 	});
    		 },
    		/**
    		 * 查询收货人信息
    		 */
    		 queryConsignee(){
                this.activeIndex = 0;
    		 	const _this = this;
    		 	this.axios.get('/ws/ms/orders/basic/'+ this.id).then(response => {
    		 		var res = response.data;
    		 		var resMeta = res.meta;
    		 		if (0 === resMeta.code) {
    		 			_this.consigneeData = res.data;
                        // _this.current = parseInt(_this.consigneeData[0].status);
    		 		}else {
    		 			_this.$Message.warning(resMeta.message);
    		 		}
    		 	});
    		 },
			/**
    		* 查询商品信息
    		*/
    		queryProduct(){
                this.activeIndex = 0;
    			const _this = this;
                _this.totalize = 0;
    			this.axios.get('/ws/ms/orders/condition/' + this.id).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.productData = res.data;
						_this.totalSymbol
                        if (1<_this.productData.length) {
                            _this.isShowTotal = 1;
                        }
                        for (var i = _this.productData.length - 1; i >= 0; i--) {
							_this.totalize += _this.productData[i].subtotal;
							_this.totalSymbol=_this.productData[i].symbol;
                        }
                        // _this.productData.property = _this.productData[0].productValueMap;
                        // _this.current = parseInt(_this.productData[0].status);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
    		},
    		/**
    		 * 查询费用信息
    		 */
    		queryCost(){
                this.activeIndex = 0;
    			const _this = this;
    			this.axios.get('/ws/ms/order/cost/'+ this.id).then(response => {
    		 		var res = response.data;
    		 		var resMeta = res.meta;
    		 		if (0 === resMeta.code) {
    		 			_this.costData = res.data;
                        // _this.current = parseInt(_this.costData[0].status);
    		 		}else {
    		 			_this.$Message.warning(resMeta.message);
    		 		}
    		 	});
    		},
            // //查询退款信息
            // queryRefund(){
            //     this.activeIndex = 0;
            //     const _this = this;
            //     this.axios.get('/ws/ms/orderRefunds/byOrderId/'+ this.id).then(response => {
            //         var res = response.data;
            //         var resMeta = res.meta;
            //         if (0 === resMeta.code) {
            //             if(res.data != null){
            //                 _this.refundData = res.data;
            //             }
            //             // _this.current = parseInt(_this.costData[0].status);
            //         }else {
            //             _this.$Message.warning(resMeta.message);
            //         }
            //     });
			// },
			
			/**
			 * 显示新增弹框
			 */
			showAddModal() {
				this.modal1.show = true;
				if(this.$i18n.locale=='zh'){
					this.modal1.title = '修改订单支付金额';
				}else if(this.$i18n.locale=='en'){
					this.modal1.title = 'Modify the order payment amount';
				}else if(this.$i18n.locale=='it'){
					this.modal1.title = 'Modifica l importo del pagamento dell ordine';
				}
				
				this.initAdd();
			},
			/**
			 * 初始化新增MODAL
			 */
			initAdd() {
				this.modal1.model = {
					id:'',
					payAmount:''
				};
			},
			/**
			 * 保存弹框1内容
			 */
			saveModal1() {
				this.$refs['modal1'].validate((valid) => {
                    if (valid) {
						if(this.modal1.model.payAmount<=0){
							var currentCode=this.$i18n.locale;
							switch(currentCode){
								case 'zh':
									this.$Message.info('订单支付金额必须大于0');	
									break;
								case 'en':
									this.$Message.info('The order payment amount must be greater than 0');	
									break;
								case 'it':
									this.$Message.info("L'importo del pagamento dell'ordine deve essere maggiore di 0");	
									break;
								default:
									break;
							}							
							return;
						}
                        this.submitModal1();
                    } 
                });			
			},
			/**
			 * 提交表单
			 */
			submitModal1() {
				this.saveDataDict();
			},
			/**
			 * 保存数据字典
			 */
			saveDataDict() {
				this.modal1.model.id = this.id;
				let postData_ = this.modal1.model;
				const _this = this;
				this.axios.put('/ws/v2/ms/orders/taking', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						if(_this.$i18n.locale=='zh'){
							_this.$Message.success('修改成功');
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.success('Successfully modified');
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success('Modificato con successo');
						}						
						_this.cancelModal1();
						_this.init();
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('修改失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('fail to edit:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Modifica fallita:' + message_);
						}	
						
					}
				});
			},
			/**
			 * 取消弹框1
			 */
			cancelModal1() {
				this.$refs['modal1'].resetFields();
				this.modal1.show = false;
			},
    		
    		checkStatus(status){
				if(status == 1) return '待付款';
				if(status == 2) return '待发货';
				if(status == 3) return '待收货';
				if(status == 4) return '已完成';
				if(status == 5) return '已取消';
				if(status == 6) return '已关闭';
			},

			checkTradeStatus(status){
				if(status == 1) return '等待买家付款';
				if(status == 2) return '买家已付款';
				if(status == 3) return '卖家已发货';
				if(status == 4) return '交易成功';
				if(status == 5) return '交易完成';
				if(status == 6) return '交易关闭';
			},

			checkType(type){
				if(type == 1) return '支付宝';
				if(type == 2) return '微信';
				if(type == 3) return '银联';
			},

			checkPayStatus(status){
				if(status == 1) return '支付成功';
				if(status == 2) return '支付失败';
				if(status == 3) return '支付取消';
				if(status == 4) return '支付中';
			},
			/**
			 * 返回
			 */
    		goBack() {
				// this.$router.push({name: 'ms_order_list'});
				window.close();
    		}
    	}
	}
</script>
<style scoped>
    .table-column-info{
        color: red;
	}
	.mbody {
		padding-bottom: 20px;
	}
	.m1 {
		font-size: 18px;
	}
	.layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
    .layout-content-title {
    	text-align: right;
    	margin-right: 20px;
	}
    .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 100px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	}
	.avatar {
	    width: 100px;
	    height: 100px;
	    display: block;
	}
	.time{
        font-size: 14px;
        font-weight: bold;
    }
    .content{
        padding-left: 5px;
    }
    .timeline{
    	height:80px;
    }
    .express{
    	margin-top: 1%;
    }	
</style>
<style>

	html body{
		
		display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 
		display: -moz-box; /* 老版本语法: Firefox (buggy) */ 
		display: -ms-flexbox; /* 混合版本语法: IE 10 */ 
		display: -webkit-flex; /* 新版本语法： Chrome 21+ */ 
		display: flex; /* 新版本语法： Opera 12.1, Firefox 22+ */ 
		/*水平居中*/ 
		/*老版本语法*/ 
		-webkit-box-pack: center; 
		-moz-box-pack: center; 
		/*混合版本语法*/ 
		-ms-flex-pack: center; 
		/*新版本语法*/ 
		-webkit-justify-content: center; 
		justify-content: center;
		overflow: auto!important;
	}
	.ws-page{
		width: 85%!important;
	}

</style>
